<template>
  <div class="g-mn3" >
     <loading v-if="!playlist"></loading>
    <!-- 右边各榜单的头部 -->
    <div class="g-wrap" v-if="playlist">
      <div class="m-info m-info-rank f-cb" >
        <div class="cover u-cover u-cover-rank">
          <img
            :src="playlist.coverImgUrl"
          /><span class="msk"></span>
        </div>
        <div class="cnt">
          <div class="cntc m-info">
            <div class="hd f-cb">
              <h2 class="f-ff2">{{playlist.name}}</h2>
            </div>
            <div class="user f-cb">
              <i class="u-icn u-icn-57"></i>
              <span class="sep s-fc3">最近更新：{{playlist.trackUpdateTime | time}}</span>
              <span class="s-fc4">（更新62首）</span>
            </div>
            <div class="btns f-cb">
              <a
                href="javascript:;"
                id="xxxxxxx"
                class="u-btn2 u-btn2-2 u-btni-addply f-fl"
                @click="playAll"
              >
                <i><em class="ply"></em> 播放</i>
              </a>
              <a href="javascript:;" class="u-btni u-btni-add"></a>
              <a href="javascript:;" class="u-btni u-btni-fav">
                <i>({{playlist.subscribedCount}})</i>
              </a>
              <a href="javascript:;" class="u-btni u-btni-share">
                <i>({{playlist.shareCount}})</i>
              </a>
              <a href="javascript:;" class="u-btni j-cmt">
                <i>({{playlist.commentCount}})</i>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 右边各榜单的中部 歌曲列表/评论 -->
    <div class="g-wrap12" v-if="playlist">
      <div class="u-title u-title-1 f-cb">
        <h3><span class="f-ff2">歌曲列表</span></h3>
        <span class="sub s-fc3"><span>{{tracks.length}}</span>首歌</span>
        <div class="more s-fc3">
          播放：<strong class="s-fc6" >{{playlist.playCount}}</strong>次
        </div>
      </div>
      <div class="j-flag">
        <table class="m-table m-table-rank">
          <thead>
            <tr>
              <th class="first w1"></th>
              <th><div class="wp">标题</div></th>
              <th class="w2-1"><div class="wp">时长</div></th>
              <th class="w3-1"><div class="wp">歌手</div></th>
            </tr>
          </thead>
          <tbody>
            <tr  :class="[{'even':index%2 == 0},{'js-dis':item.noCopyrightRcmd}]" v-for="(item , index) in tracks" :key="index" @mouseenter="enter(index)" @mouseleave="count = null">
              <td>
                <div class="hd">
                  <span class="num">{{index+1}}</span>
                  <div class="rk"><span class="u-icn u-icn-75"></span></div>
                </div>
              </td>
              <td :class="{'rank':index <= 2}">
                <div class="f-cb">
                  <div class="tt">
                    <a href="javascript:;"  
                      ><img 
                       v-if="index <= 2"
                        class="rpic"
                        :src="item.al.picUrl" ></a
                      ><span
                      data-res-id="1849032609"
                      data-res-type="18"
                      data-res-action="play"
                      class="ply"
                      @click="play(item.id)"
                      >&nbsp;</span
                    >
                    <div class="ttc">
                      <span class="txt">
                        <router-link :to="{path:'/home/song' , query:{id:item.id}}"><b title="PROMISE&nbsp;ME">{{item.name}}</b></router-link>
                       </span>
                    </div>
                  </div>
                </div>
              </td>
              <td class="s-fc3">
                <span :class="['u-dur',{'hshow':index == count}]" >{{item.dt |MsTime}}</span>
                <div class="opt" v-show="index == count">
                  <a
                    class="u-icn u-icn-81 icn-add"
                    href="javascript:;"
                    title="添加到播放列表"
                  ></a
                  ><span
                    class="icn icn-fav"
                    title="收藏"
                  ></span
                  ><span
                    class="icn icn-share"
                    title="分享"
                    >分享</span
                  >
                </div>
              </td>
              <td class="">
                <div class="text" title="遗忘俱乐部">
                  <span title="遗忘俱乐部">
                    <router-link :to="{path:'/home/artistDetails' , query:{id:item.ar[0].id}}" hidefocus="true" >{{item.ar[0].name}}</router-link>
                  </span>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <comment :id="comment_ids" v-if="playlist"></comment>
    </div>
  </div>
</template>

<script>
import {playlist_detail} from '../../../network/login'
import {formatMonth , Time} from '../../../components/tool/tool'

import comment from '../../../components/comment/comment'
import loading from '../../../components/Loading/Loading.vue'
export default {
    data() {
        return {
            playlist:"", //排行榜歌单详情
            tracks:"", //排行榜歌单歌曲列表
            count:null,
            comment_ids:null, //评论id
            filteraPlaylistData:[] //过滤后这个歌单可以播放的歌曲
        }
    },
    components:{
        comment,
        loading
    },
    methods:{
        res_playlist(id){  //获取数据
          this.playlist= null
          this.comment_ids = {name:'排行榜' , id:id}
            playlist_detail(id).then(res => {
               this.playlist = res.data.playlist
               this.tracks = res.data.playlist.tracks  
               this.filteraPlaylist(res.data.playlist.tracks)
            } , err => {
                console.log("排行榜榜单获取内容失败")
            })
        },
        filteraPlaylist(arr){ //过滤 得到可以播放的歌曲
           this.filteraPlaylistData = []
           arr.forEach(item => {
               if ((parseInt(item.fee) < 1 || parseInt(item.fee) > 4 ) && !item.noCopyrightRcmd) {
                    this.filteraPlaylistData.push(item)
                }
           });
        },
        enter(i){
            this.count = i
        },
        play(id){  //列表单曲播放
           this.$store.dispatch('music_ct' , id)
        },
        playAll(){ //歌单全部播放
          if(this.filteraPlaylistData.length){
            var song_ids = {
                    name: '歌单',
                    ids: this.filteraPlaylistData,
                    song_id: this.playlist.id,
               }
           this.$store.commit("songAll_ids" , song_ids)
          }
        }
    },
    filters:{
        time(value){
          var s =  formatMonth(value)
           return s.slice(5,11) 
        },
        MsTime(value){
            return Time(value)
        }
    },
}
</script>

<style scoped>
@import url("./toplist_css/right_toplist.css");
</style>